﻿<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8"/>
	<meta name="viewport"
		  content="width=device-width,initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <link href="css/cut-img.css" type="text/css" rel="stylesheet"/>
    <style type="text/css">
        /*不需要引用的样式开始*/
        *{
            padding: 0;
            margin: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            font-family: "Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB",STHeiti,"Microsoft YaHei",sans-serif;
        }

        html,body{
            padding:0;
            margin:0;
            font-size:14px;
            color: #515151;
        }
        ul{
            list-style: none;
        }
        /*不需要引用的样式结束*/
    </style>
</head>
<body>
<div class="oui-class-cutimg">
    <button class="cutimg-btn-default">上传图标</button>
    <div class="cutimg-content show-cutimg-content"><!--点击按钮后追加show-cutimg-content-->
        <div class="cutimg-content-area">
            <div class="cutimg-content-canvas">
                <img src=""/>
            </div>
        </div>
        <div class="cutimg-content-preview">
            <div class="cutimg-preview-box">
                <span class="preview-img-area img-area-large"><img src=""/></span>
                <span class="preview-img-info">180*180</span>
            </div>
            <div class="cutimg-preview-box">
                <span class="preview-img-area img-area-middle"><img src=""/></span>
                <span class="preview-img-info">120*120</span>
            </div>
            <div class="cutimg-preview-box">
                <span class="preview-img-area img-area-small"><img src=""/></span>
                <span class="preview-img-info">60*60</span>
            </div>
        </div>
        <div class="cutimg-content-toolbar">
            <span class="cutimg-toolbar-icon cutimg-clockwise">顺时针旋转</span>
            <span class="cutimg-toolbar-icon cutimg-anti-clockwise">逆时针旋转</span>
            <span class="cutimg-toolbar-icon cutimg-level">水平翻转</span>
            <span class="cutimg-toolbar-icon cutimg-vertical">垂直翻转</span>
            <span class="cutimg-toolbar-icon cutimg-enlarge">放大</span>
            <span class="cutimg-toolbar-icon cutimg-narrow">缩小</span>
            <span class="cutimg-toolbar-icon cutimg-edit">更换</span>
        </div>
        <div class="cutimg-content-btns cutimg-clear">
            <button class="cutimg-btn-sub">确定</button>
            <button class="cutimg-btn-cancel">取消</button>
        </div>
    </div>
</div>
</body>
</html>












